<template>
  <div class="glass-effect rounded-xl p-6 tech-card data-stream">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-gray-400 text-sm mb-2">{{ title }}</p>
        <p class="text-3xl font-bold cyber-text mb-1">{{ value }}</p>
        <div class="flex items-center">
          <span 
            class="status-indicator w-2 h-2 rounded-full mr-2"
            :class="statusClass"
          ></span>
          <p class="text-sm" :class="trendClass">
            <i :class="trendIcon + ' mr-1'"></i>{{ trend }}
          </p>
        </div>
      </div>
      <div class="w-16 h-16 cyber-gradient rounded-xl flex items-center justify-center animate-pulse">
        <i :class="icon + ' text-white text-xl'"></i>
      </div>
    </div>
    <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden">
      <div 
        class="tech-progress h-full transition-all duration-1000"
        :style="{ width: progress + '%' }"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  title: string
  value: string
  icon: string
  trend: string
  status: 'online' | 'offline' | 'busy'
  progress: number
}

const props = defineProps<Props>()

const statusClass = computed(() => {
  switch (props.status) {
    case 'online':
      return 'status-indicator online bg-green-400'
    case 'offline':
      return 'status-indicator offline bg-red-400'
    case 'busy':
      return 'status-indicator busy bg-yellow-400'
    default:
      return 'bg-gray-400'
  }
})

const trendClass = computed(() => {
  if (props.trend.includes('+') || props.trend.includes('优秀') || props.trend.includes('健康')) {
    return 'text-green-400'
  } else if (props.trend.includes('运行中')) {
    return 'text-blue-400'
  }
  return 'text-gray-400'
})

const trendIcon = computed(() => {
  if (props.trend.includes('+')) {
    return 'fas fa-arrow-up'
  } else if (props.trend.includes('运行中')) {
    return 'fas fa-play'
  } else if (props.trend.includes('健康')) {
    return 'fas fa-circle'
  } else if (props.trend.includes('优秀')) {
    return 'fas fa-check'
  }
  return 'fas fa-minus'
})
</script>

